import React, { Component } from 'react';
import { Card } from 'antd';
import CategorySelector from './category-selector';
import FileUploader from '../../../util/fileupload';
import RichEditor from '../../../util/rich-editer';
import Mutil from '../../../util/mm.js';
import Product from '../../../server/product-server.js';
import TableList from '../../../util/table-list';
import './save.less';


const _mm = new Mutil();
const _product = new Product();
class Save extends Component{
	constructor(props){
		super(props);
		this.state={
			id               : this.props.match.params.pid,
			name             : '',
			subtitle         : '',
			categoryId       : 0,
			parentCategoryId : 0,
			subImages        : [],
			price            : '',
			stock            : '',
			detail           : '', 
			status           : 1 //商品状态1在售
		}
	}
	componentDidMount(){
		this.loadProuct();
	}
	loadProuct(){
		//有id的时候，表示是编辑功能，需要表单回填
		if(this.state.id){
			_product.getProduct(this.state.id).then((res) => {
				let images= res.subImages.split(',');
				res.subImages = images.map((imgUri) => {
					return {
						uri : imgUri,
						url : res.imageHost + imgUri 
					}
				});
				res.defaultDetail = res.detail;
				this.setState(res);
			}, (errMsg) => {
				_mm.errorTips(errMsg);
			})
		}
	}
	//简单字段的改变，比如商品名称，描述，价格，库存
	onValuechange(e){
		let name = e.target.name,
		    value = e.target.value.trim();
		this.setState({
			[name] : value
		})
	}
	getSubImagesString(){
		return this.state.subImages.map((image)=>image.uri).join('');
	}
	//提交表单
	onSubmit(){
		let product = {
			name       : this.state.name,
			subtitle   : this.state.subtitle,
			categoryId : parseInt(this.state.categoryId),
			subImages  : this.getSubImagesString(),
			detail     : this.state.detail,
			price      : parseFloat(this.state.price),
			stock      : parseInt(this.state.stock),
			status     : this.state.status
		},
		productCheckResult = _product.checkProduct(product);
		if(this.state.id){
			product.id = this.state.id;
		}
		//表单验证成功
		if(productCheckResult.status){
			_product.saceProduct(product).then((res) => {
				_mm.successTips(res);
				this.props.history.push('/product/index');
			}, (errMsg) => {
				_mm.errorTips(errMsg);
			})
		}
		//表单验证失败
		else{
			_mm.errorTips(productCheckResult.msg);
		}

	}
	onCategoryChange(categoryId,parentCategoryId){
		this.setState({
			categoryId      : categoryId,
			parentCategoryId: parentCategoryId
		});

	}
	//上传图片成功
	onUploadSuccess(res){
		let subImages = this.state.subImages;
		subImages.push(res)
		this.setState({
			subImages : subImages
		})
	}
	//上传图片失败
	onUploadError(errMsg){
		_mm.errorTips(errMsg)
	}
	//删除图片
	onImageDelete(e){
		let index = parseInt(e.target.getAttribute('index')),
			subImages = this.state.subImages;
			subImages.splice(index, 1);
			this.setState({
				subImages: subImages
			})
	}
	//	富文本编辑器的变化
	onRichEditorChange(value){
		this.setState({
			detail: value
		})
	}
	render(){
		return(
			<div>
				<Card title={this.state.id ? '编辑商品' : '添加商品'}>
					<div className="form-horizontal">
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品名称</label>
					    <div className="col-md-6">
					      <input 
					      	type="text" 
					      	name="name"
					      	value={this.state.name}
					      	className="form-control" 
					      	placeholder="请输入商品名称" 
					      	onChange={(e) => this.onValuechange(e)}
					      	/>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品描述</label>
					    <div className="col-md-6">
					      <input 
					      	type="text" 
					      	name="subtitle"
					      	value={this.state.subtitle}
					      	className="form-control" 
					      	placeholder="请输入商品描述" 
					      	onChange={(e) => this.onValuechange(e)}
					      	/>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">等级描述</label>
					    <CategorySelector 
					    	categoryId={this.state.categoryId}
					    	parentCategoryId={this.state.parentCategoryId}
					    	onCategoryChange={(categoryId, parentCategoryId)=> this.onCategoryChange(categoryId, parentCategoryId)} />
					  </div>
					  
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品价格</label>
					    <div className="col-md-4">
					      	<div class="input-group">
						      <input 
						      	type="text" 
						      	name="price"
						      	value={this.state.price}
						      	class="form-control" 
						      	placeholder="价格" 
						      	onChange={(e) => this.onValuechange(e)}
						      	/>
						      <span class="input-group-btn">
						        <button class="btn btn-default" type="button">元</button>
						      </span>
						    </div>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品库存</label>
					    <div className="col-md-4">
					      <div class="input-group">
						      <input 
						      	type="text" 
						      	name="stock"
						      	className="form-control" 
						      	placeholder="库存" 
						      	value={this.state.stock}
						      	onChange={(e) => this.onValuechange(e)}
						      	/>
						      <span class="input-group-btn">
						        <button class="btn btn-default" type="button">件</button>
						      </span>
						    </div>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品图片</label>
					    <div className="col-md-10" style={{overflow: 'hidden'}}>
					    	{
					    		this.state.subImages.length ? this.state.subImages.map(
					    			(image, index)=>
					    			(
					    					<div className="img-con" key={index} >
					    						<img className="img" src={image.url} />
					    						<i className="fa fa-close" index={index} onClick={(e)=>this.onImageDelete(e)} />
					    					</div>
					    			)) 
					    			: 
					    			(<div>请上传图片</div>)
					    	}
					    </div>
					    <div className="col-md-6">
					      <FileUploader 
					      	onSuccess={(res)=>this.onUploadSuccess(res)} 
					      	onError = {(errMsg) => this.onUploadError(errMsg)}
					      	/>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品详情</label>
					    <div className="col-sm-6">
					      <RichEditor 
					      	detail={this.state.detail}
					      	defaultDetail={this.state.defaultDetail}
					      	onValueChange={(value) => this.onRichEditorChange(value) } />
					    </div>
					  </div>
					  <div className="form-group">
					    <div className="col-md-offset-2 col-sm-10">
					      <button 
					      	type="submit" 
					      	className="btn btn-default"
					      	onClick={(e)=>{this.onSubmit(e)}}
					      	>提交</button>
					    </div>
					  </div>
					</div>
				</Card>
			</div>
		);
	}
}

export default Save;